﻿@model MvcGraduate.Models.Account

@{
    ViewBag.Title = "ForgetAccount";
    Layout = "~/Views/Shared/Login_Layout.cshtml";
}
@section ForgetRegisterStyle {
    <style>

        #tabs {
            overflow: hidden;
            width: 100%;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #tabs li {
            float: left;
            margin: 0 -15px 0 0;
        }
        #tabs a {
            float: left;
            position: relative;
            padding: 0 58px;
            height: 0;
            line-height: 30px;
            text-transform: uppercase;
            text-decoration: none;
            color: #fff;
            border-right: 30px solid transparent;
            border-bottom: 30px solid #3D3D3D;
            border-bottom-color: #777\9;
            opacity: .3;
            filter: alpha(opacity=30);
        }
        #tabs a:hover,
        #tabs a:focus {
            border-bottom-color: #2ac7e1;
            opacity: 1;
            filter: alpha(opacity=100);
        }
        #tabs a:focus {
            outline: 0;
        }
        #tabs #current {
            z-index: 3;
            border-bottom-color: #3d3d3d;
            opacity: 1;
            filter: alpha(opacity=100);
        }
        /* ----------- */
        #content {
            border-top: 2px solid #3d3d3d;
            padding: 2em;
            /*height: 220px;*/
        }
            #content input {
                height:35px;
            }
        #content h2,
        #content h3,
        #content p {
            margin: 0 0 15px 0;
        }
        /* Demo page only */
        #about {
            color: #999;
            text-align: center;
            font: 0.9em Arial, Helvetica;
        }
        #about a {
            color: #777;
        }
    </style>
}
<div style="height: 300px;width: 100%;background-image:url(../../Images/login-bg.png);line-height:300px;">
    <div style="height: 500px;width: 58%;margin:auto;margin-top:-30px;position:absolute;left:300px;">
        <ul id="tabs">
            <li>
                <a href="#" name="#tab1">填写账户名</a>
            </li>
            <li>
                <a href="#" name="#tab2">验证身份</a>
            </li>
            <li>
                <a href="#" name="#tab3">设置新密码</a>
            </li>
            <li>
                <a href="#" name="#tab4">完成</a>
            </li>
        </ul>
        <form action="@Url.Action("ValidateCount")">
            <div id="content">
                <div id="tab1">
                    <table style="margin-left:-50px;margin-top:30px;">
                        <tr>
                            <td align="right">账户名：</td>
                            <td align="left"><input name="AccountName" id="AccountName" placeholder="请输入您的用户名/邮箱" style="width:250px;" /></td>
                            <td align="left" style="color:#333333"><label id="Error_Name"></label></td>
                        </tr>
                        <tr>
                            <td align="right">验证码：</td>
                            <td align="left">
                                <input id="validateCode" minlength="4" required="required" style="width:100px;" />
                                <img id="validateImage" onclick="ChangeValidateCode()" src="@Url.Action("ValidateImage", "Account")" style="vertical-align: middle;margin-left:10px;" />
                                <div style="display:inline-block;">
                                    <span style="font-size:12px;">看不清?<a href="#" onclick="ChangeValidateCode()">换一张</a></span>
                                </div>
                            </td>
                            <td align="left" style="color:#333333"><label id="Error_Code"></label></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td align="left"><button type="button" style="width:68px;height:25px;" onclick="NextStep(1)">下一步</button></td>
                        </tr>
                    </table>
                </div>
                <div id="tab2">
                    <table style="margin-left:-50px;margin-top:30px;">
                        <tr>
                            <td align="right">请输入绑定的邮箱：</td>
                            <td align="left"><input name="AccountEmail" email="true" id="AccountEmail" placeholder="请输入您的邮箱" style="width:250px;" /></td>
                            <td align="left" style="color:#333333;padding-left:4px"> @Html.ValidationMessage("AccountEmail")</td>
                        </tr>
                        <tr></tr>
                        <tr>
                            <td></td>
                            <td align="left"><button type="button" style="width:160px;height:25px;" onclick="SendEmailToGuest()">发送邮箱</button></td>
                        </tr>
                    </table>
                </div>
                <div id="tab3">

                </div>
                <div id="tab4">

                </div>
            </div>
        </form>
    </div>
</div>
<script>
    function SendEmailToGuest()
    {
        $.post(
            "@Url.Action("SendEmailToGueat","Account")",
            { "loginID": $('#AccountName').val(), "email": $('#AccountEmail').val() },
            function (data) {
                if (data != "false")
                {
                    $('#tab2 table').children().remove();
                    var str = '<tr></tr><tr><td align="right"><img src="/Images/p8.jpg" /></td><td align="left">验证邮件已发送，请您<a href="' + data + '">登录邮箱</a>完成验证</td> </tr>';
                    $('#tab2 table').html(str);
                }
            })
    }
    function ChangeValidateCode() {
        $('#validateImage').attr("src", "ValidateImage/Account?rand=" + Math.random());
    }
    function resetTabs() {
        $("#content > div").hide(); //Hide all content
        $("#tabs a").attr("id", ""); //Reset id's
    }
    function NextStep(id) {
        $.post(
            "@Url.Action("ISHaveCount")",
            { loginID: $('#AccountName').val(), validateCode:$('#validateCode').val() },
            function (data) {
                if (data != 0) {
                    if (data == 1)
                        $('#Error_Code').text("验证码输入错误");
                    if(data==2)
                        $('#Error_Name').text("用户或邮箱不存在");
                }
                else {
                    $('#Error_Name').text("");
                    var temp = $('#tabs a').eq(id);
                    if ($(temp).attr("id") == "current") { //detection for current tab
                        return
                    }
                    else {
                        resetTabs();
                        $(temp).attr("id", "current"); // Activate this
                        $($(temp).attr('name')).fadeIn(); // Show content for current tab
                    }
                }
            });
    }
    var myUrl = window.location.href; //get URL
    var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // For localhost/tabs.html#tab2, myUrlTab = #tab2
    var myUrlTabName = myUrlTab.substring(0, 4); // For the above example, myUrlTabName = #tab
    (function () {
        $("#content > div").hide(); // Initially hide all content
        $("#tabs li:first a").attr("id", "current"); // Activate first tab
        $("#content > div:first").fadeIn(); // Show first tab content

        for (i = 1; i <= $("#tabs li").length; i++) {
            if (myUrlTab == myUrlTabName + i) {
                resetTabs();
                $("a[name='" + myUrlTab + "']").attr("id", "current"); // Activate url tab
                $(myUrlTab).fadeIn(); // Show url tab content
            }
        }
    })()
</script>